import './ModalseeC2.css'
import React, { useState } from 'react';
import { Modal, Button } from 'antd'
import {
    Form,
    Input,
    Radio,
    Select,
} from 'antd';
import http from '../../../../../utils/http';
const ModalseeC2 = (props) => {
    // console.log(props);
    let raddioV = props.content.status == '启用' ? 1 : 2
    const { TextArea } = Input;
    const onChange2 = e => {
        console.log('Change:', e.target.value);
    };
    const onChange = e => {
        console.log(e);
    };
    //编辑
    const [isModalVisible2, setIsModalVisible2] = useState(false);


    let [Lower_limit_of_value, setLower_limit_of_value] = useState()
    const editLower_limit_of_value = e => {
        // console.log('下限', e.target.value);
        setLower_limit_of_value(e.target.value)
        console.log('下限', e.target.value);
    };
    // 上限
    let [Upper_limit_of_value, setUpper_limit_of_value] = useState()
    const editUpper_limit_of_value = e => {
        // console.log('上限', e.target.value);
        setUpper_limit_of_value(e.target.value)
        console.log('上限', e.target.value);
    };

    // 表现
    let [Performance, setPerformance] = useState()
    function editPerformance(value) {
        console.log(`表现 ${value}`);
        setPerformance(value)
    }

    // 状态
    let [State, setState] = useState(1)
    function editState(value) {
        // console.log(`状态 `, value.target.value);
        setState(value.target.value)
        console.log(State);
    }

    // 报告
    let [report, setreport] = useState()
    function editreport(value) {
        console.log(`报告 `, value.target.value);
        setreport(value.target.value)
    }

    const showModal2 = () => {
        setIsModalVisible2(true);
    };

    const handleOk2 = () => {
        setIsModalVisible2(false);
        console.log(props.content.Comment_configuration_id);
        http({
            url: '/Comment/edit',
            method: 'post',
            data: {
                Comment_configuration_id: props.content.Comment_configuration_id,
                Lower_limit_of_value: Lower_limit_of_value || props.content.Lower_limit_of_value,
                Upper_limit_of_value: Upper_limit_of_value || props.content.Upper_limit_of_value,
                report: report || props.content.report,
                Performance: Performance || props.content.Performance,
                State: State || props.content.State,
            }
        }).then((res) => {
            if (res) {
                props.fn();
            }
        })
    };

    const handleCancel2 = () => {
        setIsModalVisible2(false);
    };
    // 模态框title
    const CustomTitle2 = () => {
        return (
            <div className='CustomTitle_title'>
                编辑
            </div>
        )
    }
    return (
        <div>
            <a onClick={showModal2}>编辑</a>
            <Modal cancelText='返回' okText='确认' width="715px" title={<CustomTitle2></CustomTitle2>} visible={isModalVisible2} onOk={handleOk2} onCancel={handleCancel2} footer={[<Button id="ModalseeS3Btn1" key="back" onClick={handleCancel2}>返回</Button>,
            <Button id="ModalseeS3Btn2" key="submit" type="primary" onClick={handleOk2}>
                确认
            </Button>,
            ]}>
                <div className="ModalseeC2">
                    <Form className="comment">
                        <p>健康值:</p>
                        <div className="Health_value">
                            <Form.Item >
                                <Input placeholder="请输入数值" onChange={editLower_limit_of_value}
                                    defaultValue={props.content.Health_value_Lower_limit_of_value}
                                />
                            </Form.Item>
                            <span>——</span>
                            <Form.Item>
                                <Input placeholder="请输入数值" onChange={editUpper_limit_of_value}
                                    defaultValue={props.content.Health_value_Upper_limit_of_value}
                                />
                            </Form.Item>
                        </div>
                        <p>表现:</p>
                        <Form.Item >
                            <Select placeholder="请选择"
                                defaultValue={props.content.performance}
                                onChange={editPerformance}
                            >
                                <Select.Option value="极差">极差</Select.Option>
                                <Select.Option value="差">差</Select.Option>
                                <Select.Option value="一般">一般</Select.Option>
                                <Select.Option value="良好">良好</Select.Option>
                                <Select.Option value="优秀">优秀</Select.Option>
                            </Select>
                        </Form.Item>
                        <p>报告:</p>
                        <Form.Item >
                            <TextArea showCount maxLength={120}
                                defaultValue={props.content.report}
                                allowClear onChange={editreport} />
                        </Form.Item>
                        <p className="status">状态:</p>
                        <Form.Item >
                            <Radio.Group name="radiogroup" onChange={editState} defaultValue={raddioV}>
                                <Radio value={1}>启用</Radio>
                                <Radio value={2}>禁用</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </div>
    );
};
export default ModalseeC2